
<template>
    <div class="wrap">

        <div class="content clearfix">
            <left-menu class="fl"></left-menu>
            <!--先判断是否有商品-->
                <div class="content-box fr" v-if="goodsList.length>0">
                    <Card
                            class="goods-card"
                            v-for="(item, index) in goodsList"
                            :key="index"
                    >
                        <div class="goods-item">
                            <div class="thumb-box">
                               <router-link to="#">
                                   <img :src="$target+item.photo" alt="" />
                                </router-link>
                            </div>
                            <div class="info-box">
                                <router-link to="#" class="title">{{ item.name }}</router-link>
                                <div class="bottom-info">
                                    <div class="t-info">
                                        <span class="price"
                                        >￥{{item.sellPrice}}元</span
                                        >
                                        <span>下架时间:{{item.updateTime | dateFormat}}</span>
                                    </div>
                                    <div class="btn-group">
                                        <Button
                                                type="primary"
                                                size="small"
                                                @click="setStatus(item.id, index, 1)">
                                            重新上架</Button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </Card>
                    <!--分页-->
                    <div class="pagination">
                        <el-pagination
                                background
                                layout="prev, pager, next"
                                :page-size="pageSize"
                                :total="total"
                                @current-change="currentChange"
                        ></el-pagination>
                    </div>
                    <!-- 分页END-->
                </div>
            <div v-else class="content-box fr">您没有下架的商品哦！</div>
        </div>
    </div>
</template>

<script>
    import leftMenu from "./UserMenu.vue";
    export default {
        name: "UserDownGoods",
        components: {
            leftMenu,
        },
        data() {
            return {
                goodsList: [],
                total: 0, // 求购商品总量
                pageSize: 4, // 每页显示的商品数量
                currentPage: 1, //当前页码
                page: 0,
            }
        },
        created() {
            // 获取下架商品
            this.getProductList();
        },
        //加载页面时候重新获取
        activated: function() {
            this.getProductList();
        },
        methods: {
            // 返回顶部
            backtop() {
                const timer = setInterval(function() {
                    const top = document.documentElement.scrollTop || document.body.scrollTop;
                    const speed = Math.floor(-top / 5);
                    document.documentElement.scrollTop = document.body.scrollTop =
                        top + speed;
                    if (top === 0) {
                        clearInterval(timer);
                    }
                }, 20);
            },
            // 页码变化调用currentChange方法
            currentChange(currentPage) {
                this.currentPage = currentPage;
                this.getProductList(this.status);
                this.backtop();
            },
            /**
             * 获取下架的商品
             */
            getProductList() {
                this.$axios({
                    url:"/api/goods/findGoodsByStuId/"+this.$store.getters.getUser.userId +"/"+this.currentPage+"/"+this.pageSize+"/0"
                }).then(res => {
                    this.goodsList= res.data.records;
                    this.total = res.data.total;
                }).catch(err => {
                    return Promise.reject(err);
                });
            },
            /**
             * 商品的重新上架状态
             */
            setStatus(id, index, status) {
                this.$Modal.confirm({
                    title: '提示',
                    content: '确定要重新上架吗？',
                    onOk: () => {
                        this.$axios({
                            url:"/api/goods/updateGoodsStatusById/"+id+"/"+status
                        }).then(res => {
                            if (res.data !== "up_success") {
                                return this.$Message.error("重新上架失败");
                            }
                            this.$Message.success('重新上架成功');
                            this.goodsList.splice(index, 1);
                            this.$router.push('/userGoods')

                        }).catch(err => {
                            return Promise.reject(err);
                        });
                    },
                });

            },

        }
    }
</script>

<style scoped>
    .wrap {
        height: 100%;
        overflow-y: auto;
        background-color: #f8f8f9;
    }

    .content {
        margin: 30px auto;
        width: 1000px;
        display: flex;
    }

    .content-box {
        width: 760px;
        min-height: 600px;
        background-color: #fff;
        padding: 30px;
    }

    .goods-item {
        display: flex;
    }

    .goods-card {
        margin-bottom: 20px;
    }

    .goods-item .thumb-box {
        width: 90px;
        height: 90px;
        overflow: hidden;
        border-radius: 4px;
    }

    .goods-item .thumb-box img {
        width: 100%;
        min-height: 100%;
    }

    .goods-item .info-box {
        margin-left: 20px;
        display: flex;
        flex: 1;
        flex-direction: column;
        justify-content: space-between;
    }

    .goods-item .info-box .title {
        font-size: 15px;
        color: #666;
    }

    .bottom-info {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #808695;
    }

    .bottom-info .t-info {
        display: flex;
    }

    .bottom-info .t-info span {
        margin-right: 15px;
    }

    .bottom-info .t-info .price {
        color: #f01414;
    }

    .bottom-info .btn-group {
        display: flex;
    }

    .bottom-info .btn-group button {
        margin-left: 15px;
    }
    .pagination {
        height: 50px;
        text-align: center;
    }
</style>